Skip to main content

Embedding Stories

Embed stories in your application.

SwiftUI​

Adding the StoriesComponentView​

To integrate the StoriesComponentView into your SwiftUI layout, add it to a container view such as VStack, HStack, or ZStack:

StoriesComponentView(id: "YOUR_TAG")
    .fixedSize(horizontal: false, vertical: true)

Note: It is strongly recommended to use the .fixedSize() modifier to avoid size inconsistencies.

UIKit​

Using Storyboard​

  1. Drag an empty UIView onto your storyboard and set the desired size constraints.

  2. Select the view, and from the class inspector, assign it to StoriesComponent.

  3. Create an outlet for the view in your class.

  4. Assign an id to the view:

    view.id = "YOUR_TAG"
    view.headingLightModeColor = "#000000";
    view.headingDarkModeColor = "#ffffff";
    view.subheadingDarkModeColor = "#ffffff";
    view.subheadingLightModeColor = "#000000";

Using a Custom View​

  1. Initialize the StoriesComponent class:

    let component = StoriesComponent()

  2. Assign an id:

    component.id = "YOUR_TAG"
    component.headingLightModeColor = "#000000"; // optional
    component.headingDarkModeColor = "#ffffff"; // optional
    component.subheadingDarkModeColor = "#ffffff" // optional
    component.subheadingLightModeColor = "#000000" // optional

  3. Add it to the desired subview:

    self.view.addSubview(component)

  4. Apply Auto Layout constraints to fit your view hierarchy:

    component.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([
        component.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        component.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        component.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        component.centerYAnchor.constraint(equalTo: view.centerYAnchor)
    ])

To display targeted stories within your app, integrate the Nudge SDK and use the Nudge.getInstance().track("event_name") method to log specific user actions. Then, leverage the Nudge Dashboard to define which stories, identified by tags, should be presented in designated Story Containers based on those logged events.